<template>
    <div class="bodyBox">
        <div class="returnBtn" @click="hendleReturnBtn">
            <up-icon name="arrow-left" bold size="20"></up-icon>
        </div>
        <!-- <div class="mainBox" @change="swiperChange" @touchstart="touchStart" @touchend="touchEnd"> -->
        <!-- <scroll-view id="scrollView" class="mainBox" scroll-y :style="{ height: boxHeight + 'px' }"
            :scroll-top="scrollLeftTop" :scroll-with-animation='false' refresher-enabled
            :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="onBottom"
            @change="swiperChange" @touchstart="touchStart" @touchend="touchEnd"> -->

        <view class="notice">
            <view class="center">
                <swiper :style="{ height: boxHeight + 'px' }" vertical interval="1500" duration="300" circular="">
                    <swiper-item>
                        <div class="mainBoxItem" ref="mainBoxRef" v-for="(item, index) in listData" :key="index"
                            :class="`listItem${index}`">
                            <up-swiper :list="item.funplay_urls" indicator :autoplay="false" indicatorMode="line"
                                circular :indicatorStyle="'dot'" :height="boxHeight + 'px'"></up-swiper>
                            <span class="titleItem">{{ item.funplay_title }}</span>
                            <div class="imgBox">
                                <image :src="item.uerr_sign" @click="toUser(item.user_code)"></image>
                                <span @click="toUser(item.user_code)">{{ item.user_name }}</span>
                                <u-button size="mini" type="" :text="$t('attention')" v-if="!item.is_follow"
                                    :disabled="disablePullup" @click="attention(item, index)"
                                    :loading="btnLoading"></u-button>
                                <up-button size="mini" class="pinkBtn" v-else :disabled="disablePullup"
                                    @click="attention2(item, index)">{{ $t('havepaidattention') }}</up-button>
                            </div>
                            <div class="btnList" v-if="!disablePullup">
                                <div class="xinxin" @click="headleXin(item)">
                                    <image
                                        :src="item.is_likes ? '/static/images/xinxin2.png' : '/static/images/xinxin0.png'">
                                    </image>
                                    <span>{{ formatToWan(item.likes) }}</span>
                                </div>
                                <div class="xinxin" @click="headleXin2(item)">
                                    <image src="/static/images/qipao.png">
                                    </image>
                                    <span>{{ formatToWan(item.comments) }}</span>
                                </div>
                                <div class="xinxin" @click="headleXin3(item)">
                                    <image src="/static/images/fl.png">
                                    </image>
                                </div>
                            </div>
                            <div class="btnList" v-else>
                                <div class="xinxin">
                                    <image
                                        :src="item.is_likes ? '/static/images/xinxin2.png' : '/static/images/xinxin0.png'">
                                    </image>
                                    <span>{{ formatToWan(item.likes) }}</span>
                                </div>
                                <div class="xinxin">
                                    <image src="/static/images/qipao.png">
                                    </image>
                                </div>
                                <div class="xinxin">
                                    <image src="/static/images/fl.png">
                                    </image>
                                </div>
                            </div>
                        </div>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <!-- </scroll-view> -->
        <!-- </div> -->

        <!-- <div class="app-page">
            <SlideHorizontal name="父" class="content">
                <SlideItem>
                    <SlideHorizontal :indicator="false" name="子" class="content">
                        <SlideItem>
                            <div class="page" style="background: orange">
                                <SlideVertical :indicator="false" name="孙" class="content">
                                    <SlideItem class="mainBoxItem" ref="mainBoxRef" v-for="(item, index) in listData"
                                        :key="index" :class="`listItem${index}`">
                                        <div class="page">
                                            <up-swiper :list="item.funplay_urls" indicator :autoplay="false"
                                                indicatorMode="line" circular :indicatorStyle="'dot'"
                                                :height="boxHeight + 'px'"></up-swiper>
                                            <span class="titleItem">{{ item.funplay_title }}</span>
                                            <div class="imgBox">
                                                <image :src="item.uerr_sign" @click="toUser(item.user_code)">
                                                </image>
                                                <span @click="toUser(item.user_code)">{{ item.user_name }}</span>
                                                <u-button size="mini" type="" :text="$t('attention')"
                                                    v-if="!item.is_follow" :disabled="disablePullup"
                                                    @click="attention(item, index)" :loading="btnLoading"></u-button>
                                                <up-button size="mini" class="pinkBtn" v-else :disabled="disablePullup"
                                                    @click="attention2(item, index)">{{
                                                        $t('havepaidattention') }}</up-button>
                                            </div>
                                            <div class="btnList" v-if="!disablePullup">
                                                <div class="xinxin" @click="headleXin(item)">
                                                    <image
                                                        :src="item.is_likes ? '/static/images/xinxin2.png' : '/static/images/xinxin0.png'">
                                                    </image>
                                                    <span>{{ formatToWan(item.likes) }}</span>
                                                </div>
                                                <div class="xinxin" @click="headleXin2(item)">
                                                    <image src="/static/images/qipao.png">
                                                    </image>
                                                    <span>{{ formatToWan(item.comments) }}</span>
                                                </div>
                                                <div class="xinxin" @click="headleXin3(item)">
                                                    <image src="/static/images/fl.png">
                                                    </image>
                                                </div>
                                            </div>
                                            <div class="btnList" v-else>
                                                <div class="xinxin">
                                                    <image
                                                        :src="item.is_likes ? '/static/images/xinxin2.png' : '/static/images/xinxin0.png'">
                                                    </image>
                                                    <span>{{ formatToWan(item.likes) }}</span>
                                                </div>
                                                <div class="xinxin">
                                                    <image src="/static/images/qipao.png">
                                                    </image>
                                                </div>
                                                <div class="xinxin">
                                                    <image src="/static/images/fl.png">
                                                    </image>
                                                </div>
                                            </div>
                                        </div>
                                    </SlideItem>
                                </SlideVertical>
                            </div>
                        </SlideItem>
                    </SlideHorizontal>
                </SlideItem>
            </SlideHorizontal>
        </div> -->
    </div>
    <upModal :modalShow="modalShow" :modalText1="t('Doyouwanttocancelattention')" :showImage="false" :isCancel="true"
        @cancel="modalShow = false" @cloos="cloos"></upModal>
</template>

<script setup lang="ts">
import upModal from '../../components/upModal.vue';
import { ref, reactive, onMounted } from 'vue'
import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app';
import { attentionAndNot, funpaly, funpalyLike } from '@/api/index/index.js'
import { fashionplay } from '@/api/index/index'
import { formatToWan } from '@/utils/numericalToW'
import SlideHorizontal from "@/components/SlideHorizontal.vue";
import SlideItem from "@/components/SlideItem.vue";
import SlideVertical from "@/components/SlideVertical.vue";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const hendleReturnBtn = () => {// 返回键
    // #ifndef H5
    plus.storage.setItem('indexData', JSON.stringify(listData.value)) // 储存信息
    plus.storage.setItem('indexNum', itemNum.value) // 储存信息
    plus.storage.setItem('indexValue', listPage.value) // 储存信息
    // #endif
    uni.navigateBack()
}
// 手机物理返回键
onBackPress(() => {
    // #ifndef H5
    plus.storage.setItem('indexData', JSON.stringify(listData.value)) // 储存信息
    plus.storage.setItem('indexNum', itemNum.value) // 储存信息
    plus.storage.setItem('indexValue', listPage.value) // 储存信息
    // #endif
})
let scrollLeftTop = ref(0)// 顶部距离
let listData = ref([])
let optionsId = ref('');
let current = ref(0)
let startY = ref(0)
let endY = ref(0)
const triggered = ref(false)
const btnLoading = ref(false)
const disablePullup = ref(false)// 禁止上拉、交互等
const onRefresh = () => {// 下拉刷新函数
    triggered.value = true

    setTimeout(() => {
        triggered.value = false;
        uni.stopPullDownRefresh();// 关闭下来刷新动画效果
    }, 1000);
}
const onBottom = () => {// 上拉加载函数
    if (disablePullup.value) return
    console.log('触底事件');
    listPage.value++
    fashionplay(listPage.value).then((res: object) => {
        // console.log('res', res.data)
        if (res.code == 200) {
            if (!res.data) {
                listPage.value--
                uni.showToast({
                    title: t('Intheend'),
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            listData.value.push(...res.data)
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
            listPage.value--
        }
    })
}
const swiperChange = (e: object) => {
    console.log('swiperChange', e.detail.current);
}
const isScrolling = ref(false)
const touchStart = (e: object) => {// 触摸开始
    if (isScrolling.value) return
    // console.log('touchStart', e.touches[0].clientY);
    startY.value = e.touches[0].clientY;
}
const touchEnd = (e: object) => {// 触摸结束
    if (isScrolling.value) return
    const endY = e.changedTouches[0].pageY
    const deltaY = startY.value - endY
    let data = scrollLeftTop.value
    // 判断滑动方向
    if (Math.abs(deltaY) > 60) { // 滑动阈值
        isScrolling.value = true
        if (deltaY > 0) {
            // 向上滑动，向下滚动
            scrollLeftTop.value += boxHeight.value
        } else {
            // 向下滑动，向上滚动
            scrollLeftTop.value -= boxHeight.value
        }
        // 确保滚动位置不会超出范围
        const maxScroll = (listData.value.length - 1) * boxHeight.value
        scrollLeftTop.value = Math.max(0, Math.min(scrollLeftTop.value, maxScroll))
        // 延迟重置滚动状态，让滚动完成
        setTimeout(() => {
            isScrolling.value = false
        }, 500)
    } else {
        // scrollLeftTop.value = scrollLeftTop.value = 100
        // scrollLeftTop.value = data
        // console.log('滑动距离', deltaY);
        // console.log('高度', scrollLeftTop.value);

        // if (deltaY > 0) {
        //     scrollLeftTop.value += Math.abs(deltaY)
        //     // scrollLeftTop.value = scrollLeftTop.value
        // } else {
        //     scrollLeftTop.value -= Math.abs(deltaY)
        //     // scrollLeftTop.value = scrollLeftTop.value
        // }
        // console.log('滑动后高度', scrollLeftTop.value);
    }
}
const scrollView = ref(null)
const toItem = (index: number, YData: number) => {// 滑动到内容
    if (index == 0) {
        // #ifndef H5
        // scrollLeftTop.value = scrollLeftTop.value - 10
        // // 内容距离顶部的高度
        // uni.createSelectorQuery()
        //     .select(`.listItem${itemNum.value}`)
        //     .boundingClientRect((res: object) => {
        //         if (res) {
        //             scrollLeftTop.value = scrollLeftTop.value + YData
        //         }
        //     }).exec()
        // #endif
    } else {
        console.log('内容索引', itemNum.value);

        // #ifndef H5
        // scrollLeftTop.value = scrollLeftTop.value - 10
        // 内容距离顶部的高度
        uni.createSelectorQuery()
            .select(`.listItem${itemNum.value}`)
            .boundingClientRect((res: object) => {
                console.log('内容离顶部距离', res.top);

                if (res) {
                    scrollLeftTop.value = res.top + YData
                }
            }).exec()
        // #endif
    }
}
const headleXin = (item: object) => {// 点赞按钮
    let para = {
        funplaycode: item.funplay_code,
        userCodeWithFun: item.user_code,
    }
    funpalyLike(para).then((res: object) => {
        if (res.code == 200) {
            item.is_likes = !item.is_likes
            if (item.is_likes) {
                item.likes++
            } else {
                item.likes--
            }
        } else {
            uni.showToast({
                title: `${res.mes}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'error',
            duration: 2000
        })
    })
}
const headleXin2 = (item: object) => {
    if (item) {
        uni.navigateTo({
            url: `/pages/advertisements/articleDetails?forget=${t('comments')}&data=${item.funplay_code}`
        })
    }
}
const headleXin3 = (item: object) => {
    if (item) {
        uni.navigateTo({
            url: `/pages/advertisements/articleDetails?data=${item.funplay_code}`
        })
    }
}
const modalShow = ref(false)
const isAttention = ref(false)// 关注状态
const toUser = (data: object) => {// 头像点击
    uni.navigateTo({
        url: '/pages/me/userHomepage?data=' + data
    })
}
// 关注按钮
const attention = (item: object, index: number) => {
    btnLoading.value = true
    let para = {
        followUserCode: listData.value[index].user_code,
        isFollow: true,
    }
    attentionAndNot(para).then((res: object) => {
        if (res.code === 200) {
            // if (!isAttention.value) {
            // uni.showToast({
            //     title: '关注成功',
            //     icon: 'success',
            //     duration: 2000
            // })
            item.is_follow = true
            // } else {
            //     modalShow.value = true;
            // }
        } else {
            uni.showToast({
                title: `${res.mes}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'error',
            duration: 2000
        })
    }).fainally(() => {
        btnLoading.value = false
    })
}
let itemData = ref({})
let itemIndex = ref(0)
// 取消关注按钮
const attention2 = (item: object, index: number) => {
    itemData.value = item
    itemIndex.value = index
    modalShow.value = true
}
// 弹窗按钮
const cloos = () => {
    let para = {
        followUserCode: listData.value[itemIndex.value].user_code,
        isFollow: false,
    }
    attentionAndNot(para).then((res: object) => {
        modalShow.value = false
        if (res.code === 200) {
            // uni.showToast({
            //     title: '取消关注成功',
            //     icon: 'success',
            //     duration: 2000
            // })
            itemData.value.is_follow = false
        } else {
            uni.showToast({
                title: `${res.mes}`,
                icon: 'error',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'error',
            duration: 2000
        })
    }).finally(() => {
        modalShow.value = false
    })
}
const mainBoxRef = ref(null)
const boxHeight = ref(0)
const itemBoxTop = ref(0) // 对应内容距离顶部的高度
const itemNum = ref(0) // 第几个内容索引
const listPage = ref(1)

// 滚动到对应内容
const scrollToComment = (num: number) => {
    // #ifdef H5
    document.getElementById(`.listItem${num}`)?.scrollIntoView({ behavior: 'smooth' });
    // #endif

    // #ifndef H5
    // 内容距离顶部的高度
    uni.createSelectorQuery()
        .select(`.listItem${num}`)
        .boundingClientRect((res: object) => {
            if (res) {
                scrollLeftTop.value = res.top
            }
        }).exec()
    // #endif
};
onMounted(() => {
    uni.getSystemInfo({
        success: function (res) {
            boxHeight.value = res.screenHeight
        }
    });
})
onShow(() => {
    // if (optionsId.value) {
    //     listData.value = []
    //     funpaly(optionsId.value).then((res: object) => {
    //         if (res.code === 200) {
    //             listData.value.push(res.data)
    //         } else if (res.code === 13121208 || res.msg == '该帖子不存在') {
    //             uni.$emit('isDel', '1')
    //             uni.navigateBack()
    //         }
    //     }).catch((err: object) => {
    //         uni.showToast({
    //             title: `${err.mes}`,
    //             icon: 'error',
    //             duration: 2000
    //         })
    //     })
    // }
})
onLoad((options: object) => {
    // #ifndef H5
    let indexData = JSON.parse(plus.storage.getItem('indexData'))
    let indexNum = JSON.parse(plus.storage.getItem('indexNum'))
    let indexValue = JSON.parse(plus.storage.getItem('indexValue'))
    if (indexData) {
        listData.value = indexData
    }
    if (indexNum) {
        itemNum.value = indexNum
        setTimeout(() => {
            scrollToComment(indexNum)
        }, 50)
    }
    if (indexValue) {
        listPage.value = indexValue
    }
    // #endif
    // #ifdef H5
    if (options.forget) {
        listData.value = JSON.parse(decodeURIComponent(options.forget))
        // console.log("数据集:", listData.value)
    }
    if (options.num) {
        itemNum.value = options.num
        setTimeout(() => {
            scrollToComment(options.num)
        }, 50)
    }
    if (options.page) {
        disablePullup.value = false
        listPage.value = options.page
    } else {
        disablePullup.value = true
    }
    // #endif
});
</script>
<style scoped lang="scss">
.bodyBox {
    width: 100%;
    height: calc(100vh - 2rem);
    padding-top: 2rem;
    position: relative;
    // padding-top: var(--status-bar-height);

    .app-page {
        /* background: black; */
        height: 100%;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;

        .page {
            width: 100%;
            height: 100%;
            // background: #f1f1f1;
            // font-size: 40px;
        }
    }

    .mainBox {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .notice {
            width: 100%;
            height: 100vh;
            line-height: 80rpx;
            background: #f9f9f9;
            border-radius: 80rpx;
            margin: 0 auto;
            display: flex;

            .center {
                flex: 1;
                width: 100%;
                height: 100%;

                uni-swiper {
                    height: 100% !important;
                }

                swiper {
                    width: 100%;

                    swiper-item {
                        width: 100%;
                        height: 100%;
                        font-size: 30rpx;
                        color: #666;
                        // overflow: hidden;
                        // white-space: nowrap;
                        // text-overflow: ellipsis;
                    }
                }
            }
        }

        .mainBoxItem {
            width: 100%;
            height: calc(100%);
            position: relative;

            ::v-deep .u-swiper__wrapper__item__wrapper__image {
                background-color: #000;

                div {
                    background-size: contain !important;
                }
            }

            image {
                width: 100%;
                height: 100%;
            }

            .titleItem {
                color: #fff;
                position: absolute;
                bottom: 2.2%;
                left: 3%;
            }

            .imgBox {
                color: #fff;
                position: absolute;
                bottom: 5%;
                left: 3%;
                display: flex;
                align-items: center;

                image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 10rpx;
                }

                .u-button {
                    width: 90rpx;
                    background-color: #fff;
                    color: #000;
                    border-radius: 15px;
                    margin-left: 20rpx;
                }

                .pinkBtn {
                    background-color: #de868f;
                }
            }

            .btnList {
                color: #fff;
                position: absolute;
                bottom: 5%;
                right: 5%;

                .xinxin {
                    margin-bottom: 30rpx;
                    text-align: center;

                    image {
                        width: 2rem;
                        height: 2rem;
                        display: block;
                        margin: 0 auto;
                        margin-bottom: 20rpx;
                    }

                    span {
                        font-size: 28rpx;
                        display: block;
                        text-align: center;
                    }
                }
            }
        }
    }

    .returnBtn {
        position: fixed;
        top: 2.5rem;
        left: 20rpx;
        z-index: 9999;
    }
}
</style>